<template>
	<view class="content">
		<u-sticky>
			<view class="top">
				<u-subsection :list="tabList" activeColor="#fd9618" mode="subsection" :current="current"
					@change="tabChange"></u-subsection>
			</view>
		</u-sticky>

		<Usable v-if="current == 0" />
		<Used v-if="current == 1" />
		<Expired v-if="current == 2" />
	</view>
</template>

<script setup lang="ts">
	import Usable from './usable.vue'
	import Used from './used.vue'
	import Expired from './expired.vue'
	import { ref } from "vue"
	const current = ref(0)
	const tabList = ref(['可用券', '已用券', '过期券'])
	const tabChange = (val) => {
		current.value = val
	}
</script>

<style lang="scss" scoped>
	.u-subsection {
		width: 95%;
		margin: 0 auto;
		background-color: #fff;
	}

	.content {
		padding-top: 10rpx;
	}
</style>